<template>
<div style='background-color:white'> 
    <router-link to="/searchpage/searchclick">
        <div class="appheader" v-if="routs=='/home'">
            <div class="Home_sous">
                <p class="Home_p">
                    <img class="img1" src="@/assets/sousuo.png">
                    <span class="Home_span1">搜索你想要的商品</span>
                </p>
            </div>
            <img class="img2" src="@/assets/gwc.png">
        </div>
    </router-link>
    
        <div class="appheader" v-if="routs=='/shopmallpage/shopmall'">
            <div class="div_1" @click="this.$router.push('/selectcitys')">
                <img class="img3" src="@/assets/add.png">
                <span class="app_span">北京</span>
            </div>
            <router-link to="/searchpage">
                <div class="Home_shangc">
                    <p class="Home_p">
                        <img class="img1" src="@/assets/sousuo.png">
                        <span class="Home_span1">搜索你想要的商品</span>
                    </p>
                </div>
            </router-link>
            <img class="img2" src="@/assets/gwc.png">
        </div>
    
    
        <div class="appheader" v-if="routs=='/bebeautifulpage/bebeautiful'">
        <router-link to="/searchpage/searchclick">
            <div class="Home_mei">
                <p class="Home_p">
                    <img class="img1" src="@/assets/sousuo.png">
                    <span class="Home_span1">大家都在搜</span>
                </p>
            </div>
        </router-link>
            <img class="img4" src="@/assets/jia.png">
        </div>
    
</div>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from "vue";
import {watch, } from "@vue/runtime-core";
import { useRouter  } from 'vue-router'
const route=useRouter().currentRoute
const routs:any=ref('')
watch(route,function(val){
  routs.value=val.path  
})
onMounted(()=>{
  routs.value=route.value.path
})
</script>

<style>
.appheader{position: fixed;width: 100%;height: 44px;top:0;z-index:1;background-color:white;padding:3% 0 40px 0;}
.appheades{position: fixed;width: 375px;height: 44px;}
.appheadee{position: fixed;width: 375px;height: 44px;}
.app_span{font-size: 12px;vertical-align: middle;margin-left: 5px;}
.app_span:hover{cursor: pointer;}
.appheader:hover{cursor: pointer;}
.img3{width: 12px;height: 15px;vertical-align: middle;margin-left: 20px;}
.img4{width: 20px;height: 20px;vertical-align: middle;margin-left: 15px;}
.Home_sous{width: 313px;height: 32px;background-color: #faf8f6;margin-left: 20px;float: left;vertical-align: middle;}
.Home_sous:hover{cursor: pointer;}
.Home_shangc:hover{cursor: pointer;}
.Home_p{width: 299px;height: 19px;line-height: 19px;padding: 5px;}
.Home_span1{color: #d4ccd3;font-size: 14px;vertical-align: middle;margin-left: 20px;}
.img1{width: 16px;height: 16px;vertical-align: middle;margin-left: 6px;}
.img2{width: 18px;height: 18px;vertical-align: middle;margin-left: 16px;}
.img2:hover{cursor: pointer;}
.img3:hover{cursor: pointer;}
.img4:hover{cursor: pointer;}
.div_1{float: left;vertical-align: middle}
.Home_shangc{width: 251px;height: 32px;background-color: #faf8f6;margin-left: 10px;float: left;vertical-align: middle;}
.Home_mei{width: 303px;height: 32px;background-color: #faf8f6;margin-left: 20px;float: left;vertical-align: middle;}
</style>